export default Icon;

import React from "react";
import { createUseStyles } from "react-jss";
import type { CSSProperties } from "react";

const useStyles = createUseStyles({
  span: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
  },
  svg: {
    width: "1em",
    height: "1em",
  },
});

interface IconProps {
  viewBox: string;
  paths: Array<string>;
  className?: string;
  style?: CSSProperties;
}

function Icon({ viewBox, paths, className, style }: IconProps) {
  const classes = useStyles();
  return (
    <i
      className={classes.span + (className ? " " + className : "")}
      style={style}
    >
      <svg className={classes.svg} viewBox={viewBox} fill="currentColor">
        {paths.map((path, index) => (
          <path key={index} {...JSON.parse(path)} />
        ))}
      </svg>
    </i>
  );
}

Icon.displayName = "Icon";
